// ... existing code ...
<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "名医助手",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  }
}
</route>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'

// 消息列表数据
const messages = ref([
  {
    id: 1,
    content: '您好，我是优医客服，请问有什么可以帮助您的？',
    time: '14:13',
    isMe: false
  }
])

// 输入框内容
const inputContent = ref('')

// 发送消息
const sendMessage = () => {
  if (!inputContent.value.trim()) return

  const now = new Date()
  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  const time = `${hours}:${minutes}`

  // 添加用户消息
  messages.value.push({
    id: Date.now(),
    content: inputContent.value,
    time,
    isMe: true
  })

  // 清空输入框
  inputContent.value = ''

  // 滚动到最新消息
  nextTick(() => {
    const messageList = document.querySelector('.message-list')
    if (messageList) {
      messageList.scrollTop = messageList.scrollHeight
    }
  })

  // 模拟接收回复
  setTimeout(() => {
    receiveMessage()
  }, 1000)
}

// 模拟接收消息
const receiveMessage = () => {
  const replies = [
    '感谢您的咨询，请问有什么具体症状？',
    '请您详细描述一下您的情况，以便我能更好地帮助您。',
    '这种情况建议您及时就医检查。',
    '您可以尝试以下方法缓解症状...',
    '请问您还有其他问题吗？'
  ]

  const randomReply = replies[Math.floor(Math.random() * replies.length)]
  const now = new Date()
  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  const time = `${hours}:${minutes}`

  messages.value.push({
    id: Date.now() + 1,
    content: randomReply,
    time,
    isMe: false
  })

  // 滚动到最新消息
  nextTick(() => {
    const messageList = document.querySelector('.message-list')
    if (messageList) {
      messageList.scrollTop = messageList.scrollHeight
    }
  })
}

// 输入框聚焦事件
const onInputFocus = () => {
  nextTick(() => {
    const messageList = document.querySelector('.message-list')
    if (messageList) {
      messageList.scrollTop = messageList.scrollHeight
    }
  })
}

// 触摸开始时间
const touchStartTime = ref(0)
// 触摸开始X坐标
const touchStartX = ref(0)

// 触摸开始事件
const touchStart = (e: TouchEvent) => {
  touchStartTime.value = Date.now()
  touchStartX.value = e.touches[0].clientX
}

// 处理滑动事件
const handleSwipe = (e: TouchEvent) => {
  const touchEndX = e.changedTouches[0].clientX
  const timeDiff = Date.now() - touchStartTime.value
  const xDiff = touchEndX - touchStartX.value

  // 检测是否为左滑手势
  if (timeDiff < 200 && xDiff < -50) {
    // 可以在这里添加左滑返回功能
    uni.navigateBack()
  }
}

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0]
      const now = new Date()
      const hours = now.getHours().toString().padStart(2, '0')
      const minutes = now.getMinutes().toString().padStart(2, '0')
      const time = `${hours}:${minutes}`

      messages.value.push({
        id: Date.now(),
        content: tempFilePath,
        time,
        isMe: true,
        isImage: true
      })

      // 模拟接收图片回复
      setTimeout(() => {
        const now = new Date()
        const hours = now.getHours().toString().padStart(2, '0')
        const minutes = now.getMinutes().toString().padStart(2, '0')
        const time = `${hours}:${minutes}`

        messages.value.push({
          id: Date.now() + 1,
          content: '/static/image/doctor-response.png', // 假设这是医生回复的图片
          time,
          isMe: false,
          isImage: true
        })
      }, 1500)
    }
  })
}

onMounted(() => {
  // 组件挂载时的逻辑
})

onUnmounted(() => {
  // 组件卸载时的逻辑
})
</script>

<template>
  <view class="customer-service-container">
    <!-- 顶部医生信息栏 -->
    <view class="header">
      <image class="header-avatar" src="/static/image/doctor-avatar.png" mode="aspectFill" />
      <view class="header-info">
        <text class="header-name">优医客服</text>
        <text class="header-status">在线 · 专业医疗咨询</text>
      </view>
    </view>
    <!-- 消息列表区域 -->
    <view class="message-list">
      <view v-for="message in messages" :key="message.id" class="message-item" :class="message.isMe ? 'my-message-item' : ''">
        <view :class="message.isMe ? 'my-message' : 'service-message'">
          <view v-if="!message.isMe" class="service-avatar">
            <image src="/static/image/service-avatar-new.png" mode="aspectFill" />
          </view>
          <view :class="message.isMe ? 'my-content' : 'service-content'">
            <text class="time">{{ message.time }}</text>
            <view :class="message.isMe ? 'my-bubble' : 'service-bubble'">
              <text v-if="!message.isImage">{{ message.content }}</text>
              <image v-if="message.isImage" :src="message.content" mode="aspectFit" class="message-image" />
            </view>
          </view>
          <view v-if="message.isMe" class="my-avatar">
            <image src="/static/image/user-avatar.png" mode="aspectFill" />
          </view>
        </view>
      </view>
    </view>

    <!-- 底部输入区域 -->
    <view class="input-area" @touchstart="touchStart" @touchend="handleSwipe">
      <view class="function-bar">
        <view class="image-btn" @click="chooseImage">
          <image src="/static/image/image-icon.png" mode="aspectFill" />
        </view>
        <view class="voice-btn">
          <image src="/static/image/voice-icon.png" mode="aspectFill" />
        </view>
      </view>
      <input
        class="message-input"
        v-model="inputContent"
        placeholder="请输入您的问题..."
        @confirm="sendMessage"
        @focus="onInputFocus"
      />
      <button class="send-btn" @click="sendMessage">发送</button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.customer-service-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f0f4f8;
}

.header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #4e8cff;
  color: white;
  border-bottom: 1rpx solid #eee;

  .header-avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    border: 3rpx solid rgba(255, 255, 255, 0.8);
  }

  .header-info {
    flex: 1;

    .header-name {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 5rpx;
      display: block;
    }

    .header-status {
      font-size: 24rpx;
      opacity: 0.8;
    }
  }
}

.message-list {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
  background-color: #f0f4f8;
  background-image: url('/static/image/chat-bg.png');
  background-size: cover;
  background-repeat: repeat;
}

.message-item {
  margin-bottom: 30rpx;
  display: flex;
  padding: 0 20rpx;

  &.my-message-item {
    justify-content: flex-end;
  }
}

.service-message {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.my-message {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.service-avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
  background-color: #fff;
  padding: 4rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.my-avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 20rpx;
  background-color: #fff;
  padding: 4rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.service-avatar image,
.my-avatar image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.service-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 70%;
}

.my-content {
  display: flex;
  flex-direction: column;
//   align-items: flex-end;
}

.service-bubble {
  max-width: 650rpx;
  padding: 25rpx 30rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  border-top-left-radius: 5rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  font-size: 30rpx;
  line-height: 1.6;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: -20rpx;
    top: 20rpx;
    width: 0;
    height: 0;
    border: 16rpx solid transparent;
    border-right-color: #ffffff;
  }
}

.my-bubble {
  max-width: 650rpx;
  padding: 25rpx 30rpx;
  background-color: #4e8cff;
  color: #ffffff;
  border-radius: 20rpx;
  border-top-right-radius: 5rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  font-size: 30rpx;
  line-height: 1.6;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    right: -20rpx;
    top: 20rpx;
    width: 0;
    height: 0;
    border: 16rpx solid transparent;
    border-left-color: #4e8cff;
  }
}

.message-image {
  width: 280rpx;
  height: 280rpx;
  border-radius: 16rpx;
}

.time {
  font-size: 22rpx;
  color: #999999;
  margin-top: 15rpx;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 6rpx 15rpx;
  margin-bottom: 10rpx;
  border-radius: 20rpx;
}

.input-area {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #ffffff;
  border-top: 1rpx solid #eeeeee;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.function-bar {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.image-btn,
.voice-btn {
  width: 70rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15rpx;
}

.image-btn image,
.voice-btn image {
  width: 42rpx;
  height: 42rpx;
}

.message-input {
//   flex: 1;
width: 260px;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: #f5f5f5;
//   border-radius: 45rpx;
margin-left: -80px;
  font-size: 30rpx;
  line-height: 90rpx;
  margin-bottom: 115rpx;
}

.send-btn {
  width: 150rpx;
  height: 70rpx;
  margin-left: 20rpx;
  background-color: #4e8cff;
  color: #ffffff;
  font-size: 30rpx;
  border-radius: 45rpx;
  line-height: 70rpx;
  border: none;
  margin-bottom: 100rpx;
}

</style>